<template>
	<!-- scroll-y:Y轴滚动条 -->
	<scroll-view :scroll-x="true">
		<scroll-view class="top" :scroll-x="true">
			<view class="my-scroll-item" v-for="idx in 5" :key="idx">5555555</view>
		</scroll-view>

		<view>
			<view class="content">
				<view class="box1">123</view>
				<view class="box2">345</view>
			</view>
			<!-- 
				selectable:是否可选
				space:显示连续空格	 
			-->
			<text :selectable="true" space="emsp">text标签 we qweqwr</text>
		</view>
		<!--
			indicator-dot: 指示点是否显示
			indicator-color: 默认颜色
			indicator-active-color: 激活颜色
			autoplay: 是否自动播放
			circular: 是否循环
			vertical: 是否纵向滚动
			interval: 切换的间隔
			duration: 切换动画的时间
		/-->
		<swiper :indicator-dots="true" indicator-color="rgba(0,0,0,0.3)" indicator-active-color="white" :autoplay="true"
			:interval="3000" :duration="1000" :circular="true">
			<swiper-item>
				<!-- mode: 模式，取值见文档。aspectFill常用 -->
				<image class="pic"
					src="https://img0.baidu.com/it/u=1033018635,7901815&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"
					mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="pic"
					src="https://inews.gtimg.com/om_bt/OHyQqgC_5oi4Vm0tlH49XvJzqNBHo2Zryxx5F_be5N2cIAA/1000"
					mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="pic"
					src="http://img2.baidu.com/it/u=3496745309,3975756590&fm=253&app=138&f=JPEG?w=1200&h=800"
					mode="aspectFill"></image>
			</swiper-item>
		</swiper>

		<!-- 
			open-type: 跳转方式。
				reLaunch: 跳不回来（不带返回键）。
				navigate: 能跳回来（默认）
			target: 小程序间跳转
		-->
		<navigator url="/pages/page1/page1?name='sd'&&age=12" open-type="reLaunch">goto页面1（page1）</navigator>
	</scroll-view>

</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app';
	onLoad((e)=>{
		console.log(e)
	})
// 加载弹框
// uni.showLoading({
// 	title:'加载...',
// 	mask:true,
// 	fail: (err) => {
// 		// 关闭加载弹框
// 		uni.hideLoading()
// 	}
// })

</script>

<style lang="scss">
	scroll-view {
		background-color: rgba(125, 200, 125, 0.6);

		.top {
			white-space: nowrap;

			.my-scroll-item {
				height: 100px;
				width: 100px;
				border: 1px red solid;
				display: inline-block;
				margin: 10px;
			}
		}
	}

	.content {
		border: 1px solid red;

		.box1 {
			border: 1px solid green;
		}

		.box2 {
			border: 1px solid orange;
		}
	}

	swiper-item {
		background-color: orange;

		.pic {
			width: 100%;
			height: 100%;
		}
	}
</style>